<template>
    <div id="app">
        <div style="height: 10%">
            <h1 style="text-align: center;margin: 0px;padding-top: 10px;padding-bottom: 10px;">{{ msg }}</h1>
        </div>
        <div style="height: 70%;position: relative;overflow: hidden" id="showdata">
        </div>
        <div style="height: 20%;overflow: hidden">
            <div id="form" style="height: 136px;">
                <input class="input" v-model="willdata.wishname" placeholder="写下你的名字">
                <input class="input" v-model="willdata.content" placeholder="许个愿吧"/>
                <button class="submitbtn" @click="submitForm">提交</button>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: 'App',
        data() {
            return {
                msg: '快来写上你的愿望',
                postdata: '',
                willdata: {
                    wishname: '',
                    content: ''
                }
            }
        },
        mounted() {
            this.getdata()
        },
        methods: {
            getdata() {
                this.$axios({
                    method: 'get',
                    // 允许跨域
                    url: 'http://localhost:3002/getdata',
                    // changeOrigin: true,

                }).then((res) => {          //这里使用了ES6的语法
                    console.log(res.data)      //请求成功返回的数据
                    let arr = res.data.data.list
                    for (let i = 0; i < arr.length; i++) {
                        this.showwishing(arr[i].name, arr[i].content, arr[i].createdAt)
                    }
                    if(arr.length>0){
                        this.randomxp()
                    }

                }).catch((error) =>
                    console.log(error)
                )    //请求失败返回的数据
            },
            submitForm() {
                let name = /^.{2,12}$/
                let content = /^.{1,36}$/
                if (this.willdata.wishname == '' || this.willdata.content == '') {
                    this.$message.error('把提交的内容输入完整哦')
                } else if (!name.test(this.willdata.wishname)) {
                    this.$message.error('输入正常的名字哦')
                } else if (!content.test(this.willdata.content)) {
                    this.$message.error('愿望不能超过36字哦')
                } else {
                    this.$axios({
                        method: 'post',
                        // 允许跨域
                        // changeOrigin: true,
                        url: 'http://localhost:3002/setdata',
                        params: {
                            name: this.willdata.wishname,
                            content: this.willdata.content
                        }
                    }).then((res) => {                        //这里使用了ES6的语法
                        // console.log(res)
                        if(res.data.code=='10000'){
                            this.$message.success('添加成功')
                            this.getdata()
                            this.willdata.wishname=''
                            this.willdata.content=''
                        }
                    }).catch((error) =>
                        console.log(error)
                    )    //请求失败返回的数据
                }
            },
            randomxp(){
                let will = document.getElementById('showdata')
                let divx = will.childNodes[0].offsetWidth
                for(let i =0;i<will.childNodes.length;i++){
                    let x = Math.random()
                    let y = Math.random()
                    let divpx = (document.body.offsetWidth - divx)*x +'px'
                    let divpy = (document.body.offsetHeight*0.7 - divx)*y +'px'

                    will.childNodes[i].style.left = divpx
                    will.childNodes[i].style.top = divpy
                }
            },
            showwishing(name, content, createtime) {
                let will = document.getElementById('showdata')

                let colors = ['#207de0', '#42baec', '#e3e197', '#6cde47', '#ecc733', 'red'];
                let color = colors[parseInt(Math.random() * 6)];
                let newdiv = document.createElement('div')
                newdiv.setAttribute('class', 'item')
                // newdiv.setAttribute('style', 'position:absolute;background:' + color + ';top:' + x + ';left:' + y + ';')
                newdiv.setAttribute('style', 'position:absolute;background:' + color + ';')
                let newname = document.createElement('p')
                newname.innerHTML = name + ':'
                let newcon = document.createElement('p')
                newcon.innerHTML = content
                let newtime = document.createElement('p')
                newtime.innerHTML = createtime


                newdiv.appendChild(newname)
                newdiv.appendChild(newcon)
                newdiv.appendChild(newtime)
                // let divtext = document.createTextNode()
                // console.log(divtext.target)
                // newdiv.appendChild(divtext)

                newdiv.addEventListener('mousedown', this.move)
                let oL;
                let oT;
                newdiv.addEventListener('touchstart', function (e) {
                    let will = document.getElementById('showdata')
                    for (let i = 0; i < will.children.length; i++) {
                        will.children[i].style.zIndex = 0
                    }
                    e.target.style.zIndex = 1
                    let ev = e || window.event;
                    let touch = ev.targetTouches[0];
                    oL = touch.clientX - newdiv.offsetLeft;
                    oT = touch.clientY - newdiv.offsetTop;
                    document.addEventListener("touchmove", this.defaultEvent, false);
                });
                newdiv.addEventListener('touchmove', function (e) {
                    // console.log(e)
                    e.preventDefault();
                    let ev = e || window.event;
                    let touch = ev.targetTouches[0];
                    let oLeft = touch.clientX - oL;
                    let oTop = touch.clientY - oT;
                    if (oLeft < 0) {
                        oLeft = 0;
                    } else if (document.body.offsetWidth <= oLeft + e.target.clientWidth) {
                        oLeft = document.body.offsetWidth - e.target.clientWidth
                    }
                    if (oTop < 0) {
                        oTop = 0;
                    } else if (document.body.offsetHeight * 0.7 <= oTop + e.target.clientHight) {
                        oTop = document.body.offsetHeight * 0.7 - e.target.clientHight
                    }
                    newdiv.style.left = oLeft + 'px';
                    newdiv.style.top = oTop + 'px';
                });
//触摸结束时的处理
                newdiv.addEventListener('touchend', function () {
                    document.removeEventListener("touchmove", this.defaultEvent);
                });


                will.appendChild(newdiv)
            },
            // 阻止默认事件
            defaultEvent(e) {
                e.preventDefault();
            },
            //鼠标拖拽事件
            move(e) {
                let odiv = e.target;        //获取目标元素
                let will = document.getElementById('showdata')
                for (let i = 0; i < will.children.length; i++) {
                    will.children[i].style.zIndex = 0
                }
                e.target.style.zIndex = 1
                // console.log(e.target)
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                document.onmousemove = (e) => {       //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;
                    if (left <= 0) {
                        left = 0
                    }
                    if (document.body.offsetWidth <= left + 144) {
                        left = document.body.offsetWidth - 144
                    }
                    let top = e.clientY - disY;
                    if (top <= 0) {
                        top = 0
                    }
                    if (document.body.offsetHeight * 0.7 <= top + 144) {
                        top = document.body.offsetHeight * 0.7 - 144
                    }
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                };
                document.onmouseup = () => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }


        }
    }

</script>

<style>
    body {
        margin: 0px;
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    #app {
        height: 100vh;
        width: 100vw;
        margin: 0px;
        padding: 0px;
        background: linear-gradient(rgb(50, 220, 135), rgb(113, 143, 226));

    }

    .input, .submitbtn {
        border: 0;
        border-radius: 5px;
        display: block;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        width: 300px;
        margin: 10px auto;
        font-size: 20px;
        box-sizing: border-box;
    }

    .item {
        width: 200px;
        height: 200px;
        line-height: 30px;
        border-bottom-left-radius: 20px 500px;
        border-bottom-right-radius: 500px 30px;
        border-top-right-radius: 5px 100px;
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
    }
     p {
        margin: 10px;
        font-size:5px;
        overflow: hidden;
        word-wrap: break-word;
        line-height: 1.5;
    }
</style>
